<template>
	<view class="share-monney">
		<view class="cans">
			<canvas :style="'width:'+(img_w * 0.5)+'px;height:'+(img_h * 0.5)+'px'" canvas-id="firstCanvas"
				id="firstCanvas"></canvas>
		</view>
		<view class="share-bg">
			<image :src="invitaInfo.backdrop_img" mode="" class="share-img" v-if="invitaInfo.backdrop_img"></image>
			<image src="@/static/home/share-bg.png" mode="" class="share-img" v-else></image>
			<view class="ewm-box df df-flex-direction-column df-justify-content-alin">
				<view class="share-title">【推广二维码】</view>
				<view class="ewm df df-justify-content-alin">
					<image :src="nowEwm" mode=""></image>
				</view>
				<text>长按识别二维码</text>
			</view>
			<!-- 活动规则 -->
			<!-- <view class="rule" @click="$navigateTo('/pages/extension/rule')">
				<text>活动规则</text>
			</view> -->
		</view>
		<!-- 		<view class="my-share" :style="{
			 backgroundColor: invitaInfo.background_color?invitaInfo.background_color:'#FFBD6B',
		}"> -->
		<view class="my-share">
			<view class="w-center">
				<view class="save-local" @click="_initCanvas">保存专属推广二维码</view>
				<view class="my-reward">
					<view class="my-reward-title df df-justify-content-alin">
						<view>我的奖励</view>
						<view class="intro" @click="showIntro()">活动说明</view>
					</view>
					<view class="share-local-list df df-justify-content-between">
						<view class="share-local-item">
							<view class="mm">{{detail.total || 0}}<text>元</text></view>
							<text class="share-info">累计奖励</text>
						</view>
						<view class="share-local-item df df-flex-direction-column df-justify-content-alin">
							<text class="turn-btn" @click="turnCoupon()">转加油券</text>
							<text class="turn-btn" @click="withdraw()">提现</text>
						</view>
						<view class="share-local-item">
							<view class="mm">{{detail.promote_money || 0}}<text>元</text></view>
							<text class="share-info">待入账金额</text>
						</view>
					</view>
				</view>

			</view>

		</view>

		<!-- 提示框 -->
		<toast-model class="model" ref="model" :content="content" :show-confirm="false"></toast-model>
	</view>
</template>

<script>
	import parseHtml from "@/utils/html-parser.js";
	import api from '@/api/home.js'
	import sapi from '@/api/share.js'
	import eapi from '@/api/extension.js'
	export default {
		data() {
			return {
				c_time: 5, //点击效果时间
				l_time: 60, //点击效果持续时间
				sel_index: 0,
				nav: [{
						id: 0,
						name: '待完成'
					},
					{
						id: 1,
						name: '已完成'
					}
				],
				ewm: '',
				detail: '',
				can_bg: require('@/static/home/poster.png'),
				screenW: '',
				screenH: '',
				img_w: '',
				img_h: '',
				local_ewm: '',
				ewm_W: '',
				ewm_h: '',
				list: [],
				IMG_URL: '',
				loading: false,
				page: 1,
				last_page: 0,
				total: 0,
				nowEwm: '',
				invitaInfo: {
					background_color: "#FFBD6B"
				}, // 背景图、海报图
				loadStatus: "loadmore", // 加载前值为loadmore，加载中为 loading， 没有数据为nomore
				loadTexts: {
					loading: '努力加载中. . .',
					loadmore: '轻轻上拉',
					nomore: '没有更多了'
				},
				content: "" // 提示内容
			}
		},
		onReady() {

		},
		onLoad() {
			this.IMG_URL = this.$IMG_URL
			this.getErcode()
			//拉新数据
			this.getInvite()
			// uni.showModal({
			// 	content: '功能正在开发中',
			// 	confirmText: '返回',
			// 	showCancel: false,
			// 	success: (confirm) => {
			// 		uni.navigateBack({
			// 			delta: 1
			// 		})
			// 	}
			// })
			this.getNowCode()
			// this.getSahreList(0, 'change')
			uni.getSystemInfo({
				success: (res) => {
					this.screenW = res.screenWidth
					this.screenH = res.screenHeight
				}
			})
			// uni.getImageInfo({
			// 	src: this.can_bg,
			// 	success:(image)=>{
			// 		this.img_w = image.width
			// 		this.img_h = image.height
			// 	}
			// })
			// this._initCanvas()
		},
		created() {
			this.getActivityPoster();
		},
		// onReachBottom() {
		// 	// 用户下拉
		// 	if (this.loadStatus == 'loadmore') {
		// 		this.page++;
		// 		this.loadStatus = "loading";
		// 		this.getSahreList(this.getSahreList, 'pullUp');
		// 	};
		// },
		onShow() {
			if (!uni.getStorageSync('userinfo').token) {
				uni.showToast({
					title: '请先登录！',
					icon: 'none',
					duration: 1000,
					success: () => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				})
			}
		},
		computed: {
			canH() {
				return parseInt((this.img_h * this.screenW) / this.img_h)
			}
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.getSahreList()
		// },
		methods: {
			withdraw() {
				let _this = this;
				uni.showModal({
					content: "申请提现？",
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: "操作中",
								mask: true
							});
							eapi.withdraw().then(res => {
								uni.hideLoading();
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										duration: 1500,
										icon: 'none'
									});
									_this.getInvite();
								} else {
									uni.hideToast();
									_this.content = res.msg;
									_this.$refs.model.open('center');
								};
							});
						};
					}
				});
			},
			showIntro() {
				uni.navigateTo({
					url: '/pages/extension/intro',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			//初始化canvas
			_initCanvas() {
				uni.showLoading({
					title: '生成中…'
				});
				let _this = this;
				var ctx = uni.createCanvasContext('firstCanvas', this);
				ctx.drawImage(_this.can_bg, 0, 0, this.img_w * 0.5, this.img_h * 0.5);
				ctx.drawImage(_this.local_ewm, (this.img_w * 0.5) * 0.35, (this.img_h * 0.5) * 0.395, _this.ewm_h * 0.27,
					_this
					.ewm_h * 0.27);
				ctx.draw(false, res => {
					if (res.errMsg == 'drawCanvas:ok') {
						setTimeout(() => {
							uni.hideLoading()
							uni.canvasToTempFilePath({
								canvasId: 'firstCanvas',
								success: function(rs) {
									var tempFilePath = rs.tempFilePath;
									if (rs) {
										uni.previewImage({
											urls: [tempFilePath],
											longPressActions: {
												itemList: ['发送给朋友', '保存图片', '收藏'],
												success: function(data) {},
												fail: function(err) {
													// console.log(err.errMsg);
												}
											}
										});
									}
									// console.log(tempFilePath);
									uni.hideLoading()
								},
								fail: function(res) {
									uni.hideLoading()
									uni.showToast({
										title: '绘制失败！',
										icon: "none",
										duration: 1000
									})
									// console.log(res);
								}
							})
						}, 500)
					}
				})
				// console.log(ctx, '画布')
			},
			//获取拉新数据
			getInvite() {
				eapi.userPromoter().then(res => {
					if (res.code == 1) {
						this.detail = res.data;
					}
				})
			},
			checkSel(item) {
				this.sel_index = item.id;
				// this.list = []
				this.getSahreList(item.id, 'change')
			},
			getNowCode() {
				api.getCouponPay().then(res => {
					this.nowEwm = res.data.path
				})
			},
			// 获取拉新页面背景图和拉新海报图
			getActivityPoster() {
				let _this = this;
				sapi.activityPoster().then(res => {
					if (res.code == 1) {
						// 设置导航栏背景色
						this.$nextTick(() => {
							uni.setNavigationBarColor({
								frontColor: "#ffffff",
								backgroundColor: res.data.theme_color ? res.data.theme_color :
									"#FE7F24",
								success() {},
								fail(err) {
									// console.log(err);
								}
							});
						});

						let data = JSON.parse(JSON.stringify(res.data));
						if (data.backdrop_img) {
							data.backdrop_img = this.$IMG_URL + data.backdrop_img + "";
						};
						if (data.ercode_backdrop_img) { // 后端返回海报背景图，下载到本地，获取图片信息
							data.ercode_backdrop_img = this.$IMG_URL + data.ercode_backdrop_img + "";
							uni.downloadFile({ // 下载到本地
								url: data.ercode_backdrop_img,
								success: (e) => {
									const p = e.tempFilePath;
									if (e.errMsg == 'downloadFile:ok') {
										uni.getImageInfo({
											src: p,
											success: (image) => {
												uni.hideLoading();
												_this.img_w = image.width;
												_this.img_h = image.height;
											}
										});
										_this.can_bg = p;
									};
								},
								fail: (r) => {
									uni.hideLoading();
								}
							});
						} else { // 后端没有返回，拿本地海报背景图
							uni.getImageInfo({
								src: _this.can_bg,
								success: (image) => {
									// console.log(image,'图片信息')
									_this.img_w = image.width;
									_this.img_h = image.height;
								}
							});

						}
						this.invitaInfo = data;
					} else {
						uni.getImageInfo({
							src: _this.can_bg,
							success: (image) => {
								// console.log(image,'图片信息')
								_this.img_w = image.width;
								_this.img_h = image.height;
							}
						});

						// 设置导航栏背景色
						this.$nextTick(() => {
							uni.setNavigationBarColor({
								frontColor: "#ffffff",
								backgroundColor: "#FE7F24",
								success() {},
								fail(err) {}
							});
						});
					};
				});
			},
			getErcode() {
				let _this = this;
				uni.showLoading({
					title: '加载中…'
				})
				api.getCouponPay().then(res => {
					if (res.code == 1) {
						this.ewm = res.data.path;
						uni.downloadFile({
							url: res.data.path,
							success: (e) => {
								const p = e.tempFilePath
								if (e.errMsg == 'downloadFile:ok') {
									uni.getImageInfo({
										src: p,
										success: (image) => {
											uni.hideLoading()
											// console.log(image, '图片信息')
											_this.ewm_W = image.width
											_this.ewm_h = image.height
										}
									})
									_this.local_ewm = p
									// console.log('图片url', _this.local_ewm)
									// uni.hideLoading()
								}
								// console.log('二二', e)
							},
							fail: (r) => {
								uni.hideLoading()
							}
						})
					}
					// console.log(this.$IMG_URL)
				})
			},
			// 
			getSahreList(status, flag) {
				// flag: 'change'=菜单切换  'pullUp'="上拉加载"
				let _this = this;
				if (flag == 'change') {
					_this.loading = true;
				};
				sapi.getSahreList({
					status,
					// list_rows: 5,
					page: _this.page
				}).then(res => {
					if (res.code == 1) {
						let length = res.data.data.length;
						if (_this.page == 1) { // 刷新清空原来数组
							_this.list = [];
						};
						if (length > 14) {
							_this.loadStatus = "loadmore";
						} else {
							_this.loadStatus = "nomore";
						};
						_this.$nextTick(function() {
							_this.list = _this.list.concat(res.data.data);
						});
						// this.last_page = res.data.last_page;
						// this.total = res.data.total;
						// _this.$nextTick(function(){
						// 	_this.list = res.data.data;
						// });
					} else {
						uni.showToast({
							title: res.msg,
							icon: "icon",
							duration: 1000
						});
					};
					_this.loading = false;
				}).catch((err) => {
					uni.showToast({
						title: err.msg,
						icon: "icon",
						duration: 1000
					});
					_this.loading = false;
				});
			},
			// 转加油金
			turnCoupon() {
				let _this = this;
				uni.showModal({
					content: "确认转换优惠券？",
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: "操作中",
								mask: true
							});
							eapi.turnCoupon().then(res => {
								uni.hideLoading();
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										duration: 1500,
										icon: 'none'
									});
									_this.getInvite();
								} else {
									uni.hideToast();
									_this.content = res.msg;
									_this.$refs.model.open('center');
								};
							});
						};
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share-monney {
		max-width: 100vw;
		max-height: 100vh;
		position: relative;
		overflow: hidden;

		.cans {
			position: absolute;
			left: 105%;
			;
		}

		.share-bg {
			width: 100%;
			height: 1260rpx;
			position: relative;

			.share-img {
				width: 100%;
				height: 100%;
			}

			.ewm-box {
				width: 328rpx;
				height: 374rpx;
				background: #FFFFFF;
				border: 10rpx solid #FAAD1C;
				border-radius: 30rpx;
				background: #fff;
				position: absolute;
				top: 432rpx;
				left: 50%;
				margin-left: -164rpx;
				padding-top: 24rpx;
				box-sizing: border-box;

				.share-title {
					width: 236rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #FCCD14 0%, #FF6724 100%);
					border-radius: 30rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					position: absolute;
					top: -30rpx;
					left: 50%;
					margin-left: -118rpx;
				}

				.ewm {
					width: 248rpx;
					height: 248rpx;
					background: #FFFFFF;
					border: 4rpx solid #DCDCDC;
					border-radius: 20rpx;

					image {
						width: 240rpx;
						height: 240rpx;
					}
				}

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #922800;
					padding-top: 14rpx;
				}
			}
		}

		.my-share {
			position: relative;
			top: -440rpx;
			background-color: transparent;
			width: 100%;
			// height: 300rpx;
			// background: linear-gradient(180deg, #FFBD6B 0%, #FE6522 100%);
			padding-bottom: 40rpx;

			.w-center {
				.save-local {
					width: 440rpx;
					height: 88rpx;
					background: #FFFFFF;
					margin: 0 auto;
					border-radius: 44rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF6623;
				}

				.my-reward {
					height: 220rpx;
					border-radius: 20rpx;
					background: #fff;
					margin-top: 20rpx;

					.my-reward-title {
						.intro {
							position: absolute;
							right: 7%;
							text-decoration: underline;
							font-size: 28rpx;
							color: dodgerblue;
						}

						height: 74rpx;
						border-bottom: 1px solid #E5E5E5;
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #232323;

					}

					.share-local-list {
						width: 100%;
						margin: 0 auto;
						padding-top: 20rpx;

						.share-local-item {
							width: 33.33%;
							text-align: center;

							.mm {
								font-size: 40rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #001438;

								text {
									font-size: 24rpx;
									font-weight: bold;
								}
							}

							.share-info {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
								padding-top: 14rpx;
							}

							.turn-btn {
								background-color: #FFBD6B;
								border-radius: 8rpx;
								color: #FFF !important;
								padding: 6rpx 18rpx;
								margin-top: 14rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								width: 120rpx;
								// border: 2rpx solid #;
							}
						}
					}
				}

			}

		}

		.my-mission {
			min-height: 660rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 24rpx;

			.fi-list {
				width: 100%;
				min-height: 500rpx;
				padding: 0 40rpx;
				box-sizing: border-box;

				.laoding-box {
					width: 100%;
					;
					min-height: 500rpx;
				}

				.fi-item {
					width: 100%;
					margin-top: 24rpx;
					padding-bottom: 24rpx;
					border-bottom: 1px solid #EEEEEE;

					.avata-name {
						image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}

						.name {
							padding-left: 20rpx;

							.name-user {
								font-size: 34rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #313234;
							}

							text {
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
					}

					.monney {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F12F63;

						text.plus {
							font-size: 44rpx;
							color: #000;
						}

						text.Symbol {
							font-size: 24rpx;
						}
					}
				}
			}

			.paging {
				min-width: 50%;
				max-width: 100%;
				margin: 0 auto;
				padding: 30rpx 0;

				.current-box {
					padding: 0 15rpx;
				}

				.p-btn {
					width: 100rpx;
					height: 60rpx;
					font-size: 28rpx;
					color: #fff;
					background: rgba(255, 120, 50, .7);
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;

				}
			}

			.my-mission-nav {
				height: 86rpx;
				border-bottom: 1px solid #E5E5E5;

				.my-mission-nav-in {
					width: 60%;
					margin: 0 auto;

					view {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-end;
					}

					text {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #888888;
						padding-bottom: 20rpx;
					}

					.my-mission-item {
						.active-color {
							color: #F12F63;
						}

						.active-ft {
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
						}

						.b-line {
							width: 56rpx;
							height: 8rpx;
							background: #F12F63;
							border-radius: 8rpx;
						}

						// font-size: 34rpx;
						// font-family: PingFang SC;
						// font-weight: bold;
						// color: #222222;
					}
				}

			}

			.os-list {
				width: 100%;
				min-height: 500rpx;

				.no-data {
					width: 100%;
					min-height: 500rpx;

					image {
						width: 141rpx;
						height: 148rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #BEBEBE;
					}
				}
			}
		}


		.load-status-box {
			padding: 30rpx 0;
			text-align: center;
			color: #606266;
			font-size: 28rpx;

			.status-text {
				padding: 0 20rpx;
			}

			.line {
				color: #e6e8eb;
			}
		}
	}

	.button-hover {
		background: rgba(255, 120, 51, .4) !important;
	}

	/* 修改pupop 默认层级和背景透明度 */
	/deep/.model .uni-popup {
		z-index: 99999 !important;
	}

	/deep/.model .vue-ref {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}
</style>
